<template>
	<div class="mainCont">
		<div class="leftCont" ref="left">
			<ul class="snav">
				<div class="zTreeDemoBackground left">
					<ul id="treeDemo2" class="ztree" @select="choseroom"></ul>
				</div>
			</ul>
		</div>

		<div class="rightCont">
			<router-view @getnew="getnew" :searchVal="searchVal" :searchname="searchname">
			</router-view>
		</div>

		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>

	</div>
</template>
<script type="text/babel">

	import $ from 'jquery'
	export default {
		name: "",
		data() {
			return {
				showloading: false,
				setting: {
					treeId: 'id',
					data: {
						key: {
							name: 'name'
						}
					},
					callback: {
						onClick: this.choseroom
					}
				},
				zNodes: [],
				treeClickCount:0,
				searchVal: '',  // data里面申明
				searchname: '',  // data里面申明
			};
		},
		components: {},

		created() {},

		mounted() {
			
			this.getrooms();
		},

		methods: {
			getnew(val) {
				this.getrooms()
			},
			// 科室树状图选择
			choseroom(data, node, treeNode) {
				this.treeClickCount++;
				if (this.treeClickCount >= 2) {
					return;
				}
				this.timer = window.setTimeout(() => {
					if (this.treeClickCount == 1) {
						this.treeClickCount = 0;
						console.log('单击事件,可在此处理对应逻辑')
						// if(this.searchVal == treeNode.id){
						// 	this.ztree_obj.cancelSelectedNode();
						// 	this.searchVal =''
						// 	this.searchname = '暂无上级'
						// }else{
							console.log(treeNode.id)
							this.searchVal = treeNode.id
							this.searchname = treeNode.name 
							this.$forceUpdate()
						// }
						
					} else if (this.treeClickCount > 1) {
						this.treeClickCount = 0;
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			// 获取科室
			getrooms() {
				
				this.showloading = true
				var that = this
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.post(this.$url + '/sys/dept/tree', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.zNodes = response.data.data
						that.ztree_obj = $.fn.zTree.init($("#treeDemo2"), that.setting, that.zNodes);
						that.$nextTick(() => {
						      let scrollElem = that.$refs.left; // 对应ref的命名
						      scrollElem.scrollTo({ top: 0, behavior: 'smooth' });
						    });
						that.showloading = false
						 var  nodes = that.ztree_obj.getNodes();
						for  ( var  i = 0; i < nodes.length; i++) {  //设置节点展开
						    that.ztree_obj.expandNode(nodes[i],  true ,  false ,  true );
						}
						
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
		},

		computed: {},
	};
</script>
<style lang='less' scoped>
	.mainCont {
		padding-left: 200px;
	}

	.leftCont {
		width: 200px;
		overflow-y: scroll;
		overflow-x: auto;
	}

	.leftCont::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

	li {
		background: #fff;
		position: relative;
		z-index: 2;

	}

	.rightCont {
		position: relative;
	}

	.icon-up {
		transition: all .3s;
	}

	.down {
		transition: all .3s;
	}
</style>
